type GetAdListResponse = {
  ads: AdType[]
  counts: number
}

type GetTrendResponse = {
  report: {
    daily: TrendType[]
  }
}

interface AdService {
  getAdList: () => Promise<GetAdListResponse>
  getTrend: () => Promise<GetTrendResponse>
}

import { AxiosError, AxiosInstance } from "axios"
import {
  AdService,
  GetAdListResponse,
  GetTrendResponse,
} from "models/interface"
import HTTPError from "../network/httpError"

const AD_LIST_URL = "/ad-list-data-set.json"
const AD_TREND_URL = "/trend-data-set.json"

class AdServiceImpl implements AdService {
  constructor(private axiosInstance: AxiosInstance) {}

  getAdList = async () => {
    try {
      const { data } = await this.axiosInstance.get<GetAdListResponse>(
        AD_LIST_URL
      )
      return data
    } catch (error) {
      const { response } = error as unknown as AxiosError
      if (response) {
        throw new HTTPError(response?.status, response?.statusText)
      }
      throw new Error("Unknown Error")
    }
  }

  getTrend = async () => {
    try {
      const { data } = await this.axiosInstance.get<GetTrendResponse>(
        AD_TREND_URL
      )
      return data
    } catch (error) {
      const { response } = error as unknown as AxiosError
      if (response) {
        throw new HTTPError(response?.status, response?.statusText)
      }
      throw new Error("Unknown Error")
    }
  }
}

export default AdServiceImpl

export default class HTTPError extends Error {
  constructor(private statusCode: number, public message: string) {
    super(message)
  }

  get errorMessage() {
    switch (this.statusCode) {
      case 404:
        this.message = "잘못된 요청입니다. url을 확인해주세요"
        break
      default:
        throw new Error("Unknown Error")
    }
    return this.message
  }
}

//index.tsx
const BASE_URL = process.env.REACT_APP_BASE_URL || ""
const axiosInstance = createAxiosClient(BASE_URL)
const adService = new AdService(axiosInstance)

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)

root.render(
  <React.StrictMode>
    <AdServiceProvider adService={adService}>..</AdServiceProvider>
  </React.StrictMode>
)

//AdServiceContext.tsx
import { AdService } from "models/interface"
import { createContext, useMemo, useContext } from "react"

const AdServiceContext = createContext<AdService | null>(null)
export const useAds = () => useContext(AdServiceContext)

export const AdServiceProvider = ({
  children,
  adService,
}: {
  children: React.ReactNode
  adService: AdService //interface로 바로 type정해줄 수 있어
}) => {
  const { getAdList, getTrend } = adService
  const value = useMemo(() => {
    return { getAdList, getTrend }
  }, [getAdList, getTrend])
  return (
    <AdServiceContext.Provider value={value}>
      {children}
    </AdServiceContext.Provider>
  )
}

const getAdList = useCallback(async () => {
    listDispatch({ type: DataActionEnum.SET_IS_LOADING, isLoading: true });
     try {
      const response = _await_ adService?.getAdList();
      listDispatch({
        type: DataActionEnum.SET_DATA,
        data: response?.ads || [],
      });
    } catch (e) {
      console.error(e);
    } finally {
      listDispatch({ type: DataActionEnum.SET_IS_LOADING, isLoading: false });
    }
  }, [adService, listDispatch]);

const getAdTrend = useCallback(async () => {
    trendDispatch({ type: DataActionEnum.SET_IS_LOADING, isLoading: true });
    try {
      const response = _await_ adService?.getTrend();
      trendDispatch({
        type: DataActionEnum.SET_DATA,
        data: response?.report.daily || [],
      });
    } catch (e) {
      console.error(e);
    } finally {
      trendDispatch({ type: DataActionEnum.SET_IS_LOADING, isLoading: false });
    }
  }, [adService, trendDispatch]);

const { isLoading, data: trendData } = useQuery(
  ["trend"],
  () => adService?.getTrend(),
  {
    staleTime: 1000 * 60 * 60,
    cacheTime: 1000 * 60 * 60,
  }
)
const { data: listData } = useQuery(["adList"], () => adService?.getAdList(), {
  staleTime: 1000 * 60 * 60,
  cacheTime: 1000 * 60 * 60,
})

useEffect(() => {
  trendDispatch({
    type: DataActionEnum.SET_DATA,
    data: trendData?.report.daily || [],
  })
  trendDispatch({ type: DataActionEnum.SET_IS_LOADING, isLoading })
}, [trendData, isLoading])

useEffect(() => {
  listDispatch({
    type: DataActionEnum.SET_DATA,
    data: listData?.ads || [],
  })
}, [listData])

export type ResultType = {
  [index: string]: number
}

const calculateData = (data: TrendType[]) => {
  const result: ResultType = {
    imp: 0,
    click: 0,
    cost: 0,
    conv: 0,
    convValue: 0,
    ctr: 0,
    cvr: 0,
    cpc: 0,
    cpa: 0,
    roas: 0,
  }

  data.forEach(item => {
    Object.keys(item).forEach(key => {
      if (key in result) {
        result[key] += Number(item[key])
      }
    })
  })
  return result
}

export default calculateData

type Type = {
  [index: string]: { data: string }
}

const obj: Type = {
  "123123": { data: "hi" },
}